<script setup lang='ts'>
  import { reactive, ref } from 'vue';
  import request from '@/api/index';
  import { rankingType, rankingID } from '@/pinia/getter';
  import { nameFilter, xmloading, getAssetsFile } from '@/utils/public';
  import portrait from '@/components/portrait.vue';
  const action = reactive({
    show:false,
    total:0,
    user_info:{
      num:0,
      image:'',
      name:'',
      diamond_score:0,
      wealth_score:0,
    },
    list:[] as Array<any>
  })
  const listQuery = reactive({
    page:1,
    limit:20,
    rank_id:'',
    to_user_id:'',
    ymd:''
  })
  const loadingSet = ref(false); // 是否处于加载状态
  const loadSet = ref(false); // 是否已加载完成 不再触发 load 事件
  const listload = ()=> {
    if(loadSet.value || action.list.length == 0) return
    listQuery.page += 1
    getList();
  };
  const getList = async()=>{
    const loading = xmloading()
    const res = await request.bankRichList(listQuery)
    loading.close()
    const { data_list=[] } = res?.data || {}
    // 列表返回空 禁止触底事件
    if(data_list.length == 0) {
      loadSet.value = true
      return
    }
    loadSet.value = false
    loadingSet.value = false
    action.list = [...action.list, ...data_list]
    if(data_list.length < listQuery.limit) {
      loadSet.value = true
    }
  }
  const removeListQuery = ()=>{
    loadingSet.value = false
    loadSet.value = false
    action.list = []
    getList()
  }
  const openDialog = (query:any={})=>{
    const { user_id:to_user_id, ymd } = query
    Object.assign(listQuery,{
      page:1,
      limit:20,
      rank_id:rankingID.value,
      to_user_id,
      ymd
    })
    action.user_info = query
    removeListQuery()
    action.show = true
  }
  defineExpose({
    openDialog
  })
</script>
<template>
  <div v-if="action.show" class="contribute">
    <div @click="action.show = false" class="gopage flex-align">
      <xmimg src="ranking/icon3.png" class="iconImg" />
      <span>返回</span>
    </div>
    <div class="scrollbar">
      <div class="userinfo flex-align">
        <portrait :image="action.user_info.image" />
        <div class="nickName">{{ nameFilter(action.user_info.name) }}</div>
        <div class="price flex-align">
          <xmimg :src="rankingType == 1 ? 'icon1.png':'icon3.png'" class="iconImg" />
            <span>{{ rankingType == 1 ? action.user_info.diamond_score : action.user_info.wealth_score }}</span>
        </div>
      </div>
      <van-list
        class="list"
        :offset="30"
        v-model:loading="loadingSet"
        :finished="loadSet"
        @load="listload">
        <div v-for="item in action.list" class="userinfo flex-align">
          <div class="rankingNum">{{ item.num }}</div>
          <portrait :image="item.image" />
          <div class="nickName">{{ nameFilter(item.name) }}</div>
          <div class="price flex-align">
            <xmimg :src="rankingType == 1 ? 'icon1.png':'icon3.png'" class="iconImg" />
            <span>{{ rankingType == 1 ? item.diamond_score : item.wealth_score }}</span>
          </div>
        </div>
      </van-list>
      
    </div>
  </div>
</template>

<style lang='scss' scoped>
  .contribute {
    z-index: 3999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    padding: 20px 23px;
    background: var(--contributeMainBackColor);
    display: flex;
    flex-direction: column;
    .scrollbar::-webkit-scrollbar {
      display: none;
    }
    .scrollbar {
      overflow-y: auto;
      overflow-x: hidden;
      flex: 1;
      padding: 0 0 80px;
    }
    .gopage {
      width: 70px;
      height: 24px;
      margin-bottom: 18px;
      padding: 0 0 0 8px;
      box-sizing: border-box;
      background: var(--contributeGopageBackColor);
      border-radius: 12px;
      .iconImg {
        width: 16px;
        height: 16px;
      }
      span {
        color: var(--contributeGopageFontColor);
        font-weight: 600;
        font-size: 16px;
        line-height: 1px;
      }
    }
    .userinfo {
      width: 329px;
      height: 80px;
      margin-bottom: 8px;
      padding-left: 15px;
      box-sizing: border-box;
      background: var(--contributeUserBackColor) left top / 100% 100% no-repeat;
      .rankingNum {
        height: 28px;
        line-height: 28px;
        color: var(--contributeUserTopNumFontColor);
        font-size: 16px; 
        font-weight: 600;
        text-align: center;
      }
      .portrait {
        margin: 0 10px;
      }
      .nickName {
        color: var(--contributeNickNameColor);
        font-weight: 600;
        font-size: 16px;
      }
      .price {
        width: 100px;
        margin: 0 0 0 auto;
        padding: 2px 0 2px 4px;
        box-sizing: border-box;
        background: var(--contributepriceNumBackColor);
        border-radius: 9px;
        .iconImg {
          width: 14px;
          height: 14px;
          margin-right: 4px
        }
        span {
          color: var(--contributePriceNumFontColor);
          font-size: 12px;
          font-weight: 500;
          line-height: 1px;
        }
      }
    }
  }
</style>